<template>
	<view class="content">
		<view v-for="(item,index) in takeDelivery.itemList" :key="index" class="order-item">
			<view class="wrapper">
				<view class="box">
					<text class="name">商品名称：{{item.commodity.commodityName}} </text>
				</view>
			</view>	
		</view>	
		<view class="order-item wrapper">
			<view class="box">
				<text class="name">提货人：{{takeDelivery.groupLeader.name}} </text>
			</view>
		</view>
		<view class="order-item wrapper">
			<view class="box">
				<text class="name">提货人号码：{{takeDelivery.groupLeader.phoneNumber}} </text>
			</view>
		</view>
        <view class="goods-box" @click="accounts">
            <view class="goods-num-box">
                <view class="statistics-right" >
                    <view class="btn" >
                        <text>取货</text>
                    </view>
                </view>
            </view>
        </view>
	</view>
</template>
<script>
	import {takeDeliveryList} from "@/server/headorder.js"
	export default {
		props: {
			visible: Boolean
		},
		data() {
			return {
				itemList:[],
				takeDelivery:{},
				param:{
					orderIdList:[]
				}
			}
		},
		onLoad(option) {
			this.takeDelivery = JSON.parse(decodeURIComponent(option.takeDelivery));
			console.log(this.takeDelivery)
		},
		methods: {
            accounts(){
				this.param.orderIdList.push(this.takeDelivery.id)
				takeDeliveryList(JSON.stringify(this.param)).then(response => {
				    uni.hideLoading()
				    this.$api.msg('取货成功')
				})
				uni.redirectTo({
				 	url: '/pages/headorder/headorder'
				})
			} 
		}
	}
</script>
<style lang="scss">
    page,
    .content {
        background: $page-color-base;
        height: 100%;
    }

    .wrapper {
    	display: flex;
    	flex-direction: column;
    	flex: 1;
    }

    .box {
    	display: flex;
    	align-items: center;

    	.tag {
    		font-size: 24upx;
    		color: $base-color;
    		margin-right: 10upx;
    		background: #fffafb;
    		border: 1px solid #ffb4c7;
    		border-radius: 4upx;
    		padding: 4upx 10upx;
    		line-height: 1;
    	}

    	.name {
    		font-size: 30upx;
    		color: $font-color-dark;
    	}
    }
    .order-item {
        display: flex;
        flex-direction: column;
        padding-left: 30upx;
        background: #fff;
        margin-top: 16upx;

        .i-top {
            display: flex;
            align-items: center;
            height: 80upx;
            padding-right: 30upx;
            font-size: $font-base;
            color: $font-color-dark;
            position: relative;

            .time {
                flex: 1;
            }

            .state {
                color: $base-color;
            }

            .del-btn {
                padding: 10upx 0 10upx 36upx;
                font-size: $font-lg;
                color: $font-color-light;
                position: relative;

                &:after {
                    content: '';
                    width: 0;
                    height: 30upx;
                    border-left: 1px solid $border-color-dark;
                    position: absolute;
                    left: 20upx;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
        }
    }
    .goods-box {
        width: 470rpx;
        margin-top: 20rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        .goods-num-box {
            width: 460rpx;
            height: 46rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            .statistics-right {
                width: 600rpx;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-end;

                .btn {
                    padding: 4px 50upx;
                    border-radius: 100px;
                    background: rgba(252, 2, 8, 1.0);
                    text-align: center;

                    font-size: 30rpx;
                    font-weight: 400;
                    color: #FFFFFF;
                    margin-left: 40rpx;
                }

                text {
                    font-size: 30rpx;
                    font-weight: 500;
                    color: #FFFFFF;
                }

                .text-color {
                    color: rgba(242, 18, 18, 1);
                }
            }
        }
    }
    @-webkit-keyframes load {
        0% {
            opacity: 1
        }

        100% {
            opacity: .2
        }
    }
</style>
